<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore the Peak District</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#f4f4f4;
    color:#333;
    line-height:1.6;
}


header{
    background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80");
    background-size:cover;
    background-position:center;
    height:100vh;
    color:white;
}


nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    background:rgba(0,0,0,0.5);
    position:fixed;
    width:100%;
}

nav h2{
    font-size:30px;
}

nav ul{
    display:flex;
    list-style:none;
}

nav ul li{
    margin-left:25px;
}

nav ul li a{
    color:white;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

nav ul li a:hover{
    color:#90EE90;
}


.hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    height:100vh;
    padding:20px;
}

.hero h1{
    font-size:60px;
}

.hero p{
    font-size:22px;
    margin:20px 0;
    max-width:700px;
}

.button{
    background:#2E8B57;
    color:white;
    text-decoration:none;
    padding:15px 35px;
    border-radius:30px;
    transition:.3s;
}

.button:hover{
    background:#1d6b42;
}


section{
    padding:80px 10%;
    text-align:center;
}

section h2{
    color:#2E8B57;
    margin-bottom:20px;
    font-size:35px;
}


.cards{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:40px;
}

.card{
    width:320px;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.card h3{
    margin:15px 0;
}

.card p{
    padding:0 20px 20px;
}


.activities{
    list-style:none;
    font-size:24px;
    line-height:2;
}


form{
    max-width:600px;
    margin:auto;
}

input,
textarea{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ccc;
    border-radius:5px;
}

button{
    background:#2E8B57;
    color:white;
    border:none;
    padding:15px 35px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    background:#1d6b42;
}


footer{
    background:#222;
    color:white;
    text-align:center;
    padding:25px;
}
.map-container{
    max-width:1000px;
    margin:30px auto 0;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.map-container iframe{
    width:100%;
    height:450px;
    border:none;
}

@media(max-width:768px){

nav{
    flex-direction:column;
    position:relative;
}

nav ul{
    margin-top:15px;
    flex-wrap:wrap;
    justify-content:center;
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:18px;
}

}
</style>

</head>

<body>

<header id="home">

<nav>

<h2>Peak District</h2>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#places">Places</a></li>
<li><a href="#activities">Activities</a></li>
<li><a href="#map">Map</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

</nav>

<div class="hero">

<h1>Explore the Peak District</h1>

<p>
Discover breathtaking landscapes, scenic walking trails,
historic villages, and unforgettable adventures in the UK's
first National Park.
</p>

<a href="#places" class="button">Start Exploring</a>

</div>

</header>

<section id="about"> 

<h2>About the Peak District</h2>

<p>
The Peak District National Park became the United Kingdom's first
National Park in 1951. Covering over 1,400 square kilometres,
it is famous for its rolling hills, caves, reservoirs,
picturesque villages, and stunning walking routes. Every year
millions of visitors come to hike, cycle, climb, photograph
beautiful scenery, and enjoy the peaceful countryside. The Peak District is home to many famous and beautiful places that attract visitors from around the world. Mam Tor is one of the most iconic landmarks in the area, known for its spectacular hilltop views over the Hope Valley, Edale, and the surrounding mountains. The short walk to the summit is popular because it offers some of the best scenery in the national park. Chatsworth House is another major attraction, a grand stately home surrounded by magnificent gardens, parkland, and historic buildings. It is famous for its impressive architecture, art collections, and its connection with films such as Pride and Prejudice.

Dovedale is a beautiful limestone valley famous for its natural scenery, the River Dove, and its stepping stones that allow visitors to cross the river. It is a favourite place for gentle walks, family trips, and photography. Ladybower Reservoir is well known for its peaceful waters, impressive dam, and surrounding hills, making it a popular destination for walking, cycling, and enjoying views of the countryside. Kinder Scout is the highest point in the Peak District and offers dramatic landscapes of moorlands, waterfalls, and rugged terrain. It is also historically important because of the 1932 mass trespass, which helped improve public access to the countryside.

The village of Castleton is another famous destination, surrounded by beautiful hills and known for its historic Peveril Castle and underground caves, including Peak Cavern and Treak Cliff Cavern. Stanage Edge is a striking gritstone ridge that provides amazing views across the Peak District and is popular with walkers and rock climbers. Bakewell, a charming market town, is famous for the traditional Bakewell pudding and its attractive streets, shops, and riverside walks. The Monsal Trail is a scenic walking and cycling route that follows an old railway line, featuring tunnels, bridges, and wonderful valley views. Together, these places make the Peak District a unique destination combining natural beauty, history, and outdoor adventure.
</p>

</section>

<section id="places">

<h2>Top Places to Visit</h2>

<div class="cards">

<div class="card">
<img src="C:\Users\laa26\OneDrive\Рабочий стол\My WebSite\Derby\tor.jpg" alt="Mam Tor">
<h3> Mam Tor</h3>
<p>
Known as the "Shivering Mountain", Mam Tor offers one of the
best panoramic views in the Peak District and is a favourite
walking destination.
</p>
</div>

<div class="card">
<img src="C:\Users\laa26\OneDrive\Рабочий стол\My WebSite\Derby\chtstwrt.jpg" alt="Chatsworth House">
<h3> Chatsworth House</h3>
<p>
One of Britain's finest stately homes featuring magnificent
gardens, fountains, art collections and beautiful parkland.
</p>
</div>

<div class="card">
<img src="C:\Users\laa26\OneDrive\Рабочий стол\My WebSite\Derby\7.jpg" alt="Stanage Edge">
<h3> Stanage Edge</h3>
<p>
A dramatic gritstone ridge popular with hikers, photographers,
and rock climbers offering spectacular countryside views.
</p>
</div>

</div>

</section>

<section id="activities">

<h2>Things to Do</h2>

<ul class="activities">
<li>🥾 Hiking famous walking trails</li>
<li>🚴 Mountain biking and cycling</li>
<li>🏕 Camping beneath the stars</li>
<li>📸 Landscape photography</li>
<li>🦅 Wildlife watching</li>
<li>🧗 Rock climbing</li>
</ul>

</section>
<section id="map">

    <h2>Find the Peak District</h2>

    <p>
        Plan your visit and explore the beautiful Peak District National Park.
    </p>

    <div class="map-container">

        <iframe
            src="https://www.google.com/maps?q=Peak+District+National+Park&output=embed"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>

    </div>

</section>

<section id="contact">

<h2>Contact Us</h2>

<form>

<input type="text" placeholder="Your Name" required>

<input type="email" placeholder="Your Email" required>

<textarea rows="5" placeholder="Your Message"></textarea>

<button type="submit">Send Message</button>

</form>

</section>

<footer>

<p>© 2026 Explore the Peak District | Built by Anna Leontieva UWTSD</p>

</footer>

</body>
</html>